<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face"><image :src="userinfo.avatar || '../../static/img/common/avatar.png'"></image></view>
				<view class="info" v-if="userinfo.username">
					<view class="username">{{userinfo.username}}</view>
					<view class="integral">{{userinfo.signature}}</view>
				</view>
				<view class="login" v-if="!userinfo.username" @click="toLogin()">
					<view>点击登陆</view>
				</view>
			</view>
			<view class="setting" v-if="userinfo.username"><image src="../../static/pcenter/setting.png"></image></view>
			<view class="setting" v-if="!userinfo.username" @click="toLogin()"><image src="../../static/pcenter/to.png"></image></view>
		</view>
		<view class="orders">
			<view class="box">
				<view class="label" v-for="row in orderTypeLise" :key="row.name" hover-class="hover"  @tap="toPage(row.key)">
					<view class="icon" style="height: auto;width: auto;">
						<view class="badge" v-if="row.badge>0">{{row.badge}}</view>
						<i :class="'my-icon iconfont '+row.icon" style="font-size: 80upx;"></i>
						</view>
					{{row.name}}
				</view>
			</view>
		</view> 
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(li.key)" v-bind:class="{'noborder':li_i==list.length-1}"  hover-class="hover" :key="li.name" >
				<view class="icon"><i :class="'my-icon iconfont '+li.icon"></i></view>
				<view class="text">{{li.name}}</view>
				<image class="to" src="../../static/pcenter/to.png"></image>
			</view>
		</view>
		
		<view  v-if="userinfo.username" class="list" style="border-bottom:none">
			<view class="btn-row">
			    <button @click="bindLoginOut()" type="primary" style="background: rgb(47, 133, 252);" class="primary">退出账号</button>
			</view>
		</view>
	</view>
</template>
<script>
	import service from '../../common/service.js';
	export default {
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus:true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus:false,
				//#endif
				userinfo: {},
				orderTypeLise:[ 
					{name:'收藏',icon:'iconcollection',badge:0, "key":"collection"},
					{name:'摄影',icon:'iconpicture',badge:0, "key":"photo"},
					// #ifndef MP-WEIXIN
					{name:'FM',icon:'iconplayon',badge:0, "key":"fm"},
					// #endif 
				],
				severList:[
					[
						// #ifndef MP-WEIXIN
						{name:'地铁路线',icon:'iconditie1', "key":"subway"},
						{name:'热门视频',icon:'iconvideo', "key":"hotVideo"}
						// #endif 
					],
					[
						// #ifndef MP-WEIXIN
						{name:'肥站电影',icon:'iconcomputer', "key":"movie"},
						{name:'在线电影',icon:'iconcomputer', "key":"movie2"},
						// #endif 
						//#ifdef APP-PLUS
						{name:'关联绑定',icon:'iconqq', "key":"qq"},
						//#endif
						{name:'意见反馈',icon:'iconfeedback', "key":"feedback"},
						{name:'在线客服',icon:'iconemoji', "key":"kf"}
					]
				],
			};
		},
		onLoad() {
			//PB_CODE
 			if(new Date() > new Date('2019-04-27')){
				this.orderTypeLise.push({name:'TV',icon:'iconlive',badge:0, "key":"tv"});
 			}
			//加载
			this.init();
		},
		onShow() {
		},
		methods: {
			init() {
				//用户信息
				var userInfo = service.getUsers();
				if(userInfo){
					this.userinfo = userInfo;
				}
			},
			//用户点击列表项
			toPage(key){
				if(key == 'qq'){
					if(this.userinfo && this.userinfo.username){
						this.oauth("qq");
					}else{
						uni.showToast({
							title:'请先登录'
						})
					}
				}else if(key == 'feedback'){
					uni.navigateTo({
						url: '/pages/pcenter/feedback/feedback'
					});
				}else if(key == 'collection'){
					if(this.userinfo && this.userinfo.username){
						uni.navigateTo({
							url: '/pages/pcenter/collection/collection'
						});
					}else{
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				}else if(key == 'subway'){
					uni.navigateTo({
						url: '/pages/pcenter/subway/subway'
					});
				}else if(key == 'photo'){
					uni.navigateTo({
						url: '/pages/pcenter/hot/hot'
					});
				}else if(key == 'fm'){
					uni.navigateTo({
						url: '/pages/fm/fm'
					});
				}else if(key == 'tv'){
					uni.navigateTo({
						url: '/pages/pcenter/mytv/mytv'
					});
				} else if(key == 'movie'){
					uni.navigateTo({
						url: '/pages/pcenter/mytv/mymovie'
					});
				} else if(key == 'movie2'){
					uni.navigateTo({
						url: '/pages/pcenter/mytv/mymovie2'
					});
				} else if(key == 'hotVideo'){
					uni.navigateTo({
						url: '/pages/hot-v/vds'
					});
				}else{
					//uni.showToast({title: key});
					uni.showToast({title: "敬请期待"});
				}
			},
			toLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			bindLoginOut(){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认退出吗？',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({title:"exiting..."})
							uni.request({
								url:'https://bukaa.cn/api-admin/logout',
								header:{"Authorization": service.getToken()},
								success:function(res){
									console.log(res);
									if(res.statusCode === 200){
										service.loginOut();
										that.userinfo={};
										setTimeout(function(){
											uni.reLaunch({
											    url: '../pcenter/pcenter',
											});
										},100);
									}else{
										uni.hideLoading();
										uni.showToast({
										    icon: 'none',
										    title: '系统错误!',
										});
									}
								},error(){
									uni.hideLoading();
									uni.showToast({
									    icon: 'none',
									    title: '网络出错了...',
									});
								}, complete() {
									uni.hideLoading();
								}
							})
						} else if (res.cancel) {
							//
						}
					}
				});
			},
			oauth(value) {
				var that = this;
			    uni.login({
			        provider: value,
			        success: (res) => {
			            uni.getUserInfo({
			                provider: value,
			                success: (infoRes) => {
			                    /**
			                     * 实际开发中，获取用户信息后，需要将信息上报至服务端。
			                     * 服务端可以用 userInfo.openId 作为用户的唯一标识新增或绑定用户信息。
			                     */
			                    that.bindQQ(infoRes.userInfo.openId);
			                }
			            });
			        },
			        fail: (err) => {
			            console.error('授权登录失败：' + JSON.stringify(err));
			        }
			    });
			},
			bindQQ(openId){
				var that = this;
				uni.showLoading({
					title:"绑定中，请稍后..."
				})
				uni.request({
					url: 'https://bukaa.cn/api-admin/user/bind/qq?openId=' + openId,
					header: {"Authorization":service.getToken()},
					success: (result) => {
						console.log(JSON.stringify(result))
						var data = result.data;
						if (data.status === 'ok') {
							uni.showToast({
								title:"绑定成功"
							})
						}
					},
					error: (err)=>{
						uni.showToast({
							title:"绑定失败"
						})
					},
					complete:()=>{
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import url("../../static/css/bukaa-font.css");
page{background-color:#fff}
.my-icon{
	font-size: 21px;
}
.header{
	&.status{padding-top:var(--status-bar-height);}
	background-color:#2F85FC;width:92%;height:30vw;padding:0 4%;display:flex;align-items:center;
	.userinfo{
		width:90%;display:flex;
		.face{flex-shrink:0;width:15vw;height:15vw;
			image{width:100%;height:100%;border-radius:100%}
		}
		.info{
			display:flex;flex-flow:wrap;padding-left:30upx;
			.username{width:100%;color:#fff;font-size:40upx;margin-left: 10upx}
			.integral{display:flex;align-items:center;padding:0 20upx;height:40upx;color:#fff;background-color:rgba(0,0,0,0.1);border-radius:20upx;font-size:24upx}
		}
		.login{line-height: 15vw;margin-left: 5vw;color: white;}
	}
	.setting{
		flex-shrink:0;width:6vw;height:6vw;
		image{width:100%;height:100%}
	}
}
.hover{background-color:#eee}
.orders{
	background-color:#2F85FC;width:92%;height:11vw;padding:0 4%;margin-bottom:calc(11vw + 40upx);display:flex;align-items:flex-start;border-radius:0 0 100% 100%;margin-top: -2upx;
	.box{
		width:98%;padding:0 1%;height:22vw;background-color:#fefefe;border-radius:24upx;box-shadow:0 0 20upx rgba(0,0,0,0.15);margin-bottom:40upx;display:flex;align-items:center;justify-content:center;
		.label{
			display:flex;align-items:center;justify-content:center;flex-flow:wrap;width:100%;height:16vw;color:#666666;font-size:26upx;
			.icon{
				position:relative;width:7vw;height:7vw;margin:0 1vw;
				.badge{position:absolute;width:4vw;height:4vw;background-color:#ec6d2c;top:-1vw;right:-1vw;border-radius:100%;font-size:20upx;color:#fff;display:flex;align-items:center;justify-content:center;z-index: 10;}
				image{width:7vw;height:7vw;z-index: 9;}
			}
		}
	}
}
.list{
	width:100%;border-bottom:solid 26upx #f1f1f1;
	.li{
		width:92%;height:100upx;padding:0 4%;border-bottom:solid 1upx #e7e7e7;display:flex;align-items:center;
	&.noborder{border-bottom:0}
		.icon{
			flex-shrink:0;width:50upx;height:50upx;
			image{width:50upx;height:50upx}
		}
		.text{padding-left:20upx;width:100%;color:#666}
		.to{flex-shrink:0;width:40upx;height:40upx}
	}
}
</style>
